<template>
  <div style="background-color: white">
    <div class="probox">
      <span>一级商品分类列表</span>
      <el-button
        type="primary"
        @click="
          open1();
         
        "
        >+ 添加分类</el-button
      >
    </div>
    <el-divider></el-divider>
    <div class="probox">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="商品分类" width="634px">
        </el-table-column>
        <el-table-column prop="cz" label="操作选项" width="400px">
          <el-row slot-scope="scope">
            <el-button
              size="mini"
              @click="
                open();
                id = scope.row._id;
              "
              >修改分类</el-button
            >
            <router-link to="/index/Categoryson"
              ><el-button size="mini" @click="categoryson(scope.row._id)"
                >查看子分类</el-button
              ></router-link
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 10px; text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      id: "",
    };
  },
  methods: {
    ...mapActions(["getCategorys", "updateCategorys", "getCategorysons","addCategorys"]),
    changePage(pageNum) {
      var pageSize = this.pageSize;
      this.getCategorys({ pageNum, pageSize });
    },
    categoryson(parentId) {
      var pageSize = 4;
      var pageNum = 1;
      this.getCategorysons({ parentId, pageSize, pageNum });
    },
    open() {
      this.$prompt("请输入新分类名", "修改分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          var categoryId = this.id;
          var categoryName = value;
          this.updateCategorys({ categoryId, categoryName });
          this.$message({
            type: "success",
            message: "你修后的分类是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    open1() {
      this.$prompt("请输入分类名", "添加分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          var parentId = 0;
          var categoryName = value;
          this.addCategorys({ parentId, categoryName });
          this.$message({
            type: "success",
            message: value+"分类添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
  computed: {
    tableData() {
      return this.$store.state.products.categorys.list;
    },
    total() {
      return this.$store.state.products.categorys.total;
    },
    pageNum() {
      return Number(this.$store.state.products.categorys.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.products.categorys.pageSize);
    },
    
  },
};
</script>